<template>
  <view>
    <!-- 头部搜索 -->
    <view class="cate-top">
      <cateTopSearch :topHeight="topHeight" @search="search"></cateTopSearch>
    </view>
    <!-- 分类列表 -->
    <view class="cate-bottom">
      <cateBottomLeft :bottomHeight="bottomHeight" @getCurrentActiveId="getCurrentActiveId"></cateBottomLeft>
      <cateBottomRight :bottomHeight="bottomHeight" :activeId="activeId"></cateBottomRight>
    </view>
  </view>
</template>

<script>
  import cateTopSearch from '@/components/cate/cate-top-search/cate-top-search.vue'
  import cateBottomLeft from '@/components/cate/cate-bottom-left/cate-bottom-left.vue'
  import cateBottomRight from '@/components/cate/cate-bottom-right/cate-bottom-right.vue'
  export default {
    components: {cateBottomLeft,cateBottomRight,cateTopSearch},
    data() {
      return {
        topHeight: 50,
        activeId: 0,
        bottomHeight: 0
      };
    },
    methods: {
      getCurrentActiveId(id) {
        this.activeId = id
      },
      search() {
        uni.navigateTo({
          url: '/subpkg_goods/search/search'
        })
      }
    },
    onLoad() {
      this.bottomHeight = uni.getWindowInfo().windowHeight - this.topHeight
    }
  }
</script>

<style lang="scss" scoped>
.cate-bottom {
  display: flex;
}
</style>
